import Taro, { Component } from '@tarojs/taro'
import { View, Text, PickerView, PickerViewColumn } from '@tarojs/components'
import area from './area'
import '../style/liangqian.css'

var index = [0,0,0]
class AreaSelect extends Component {

	constructor(props) {
        super(props);

        // console.log('address area  props is ', this.props)
        
        this.state = {
            // 存储省市区数据变量
            // provinces: null,
            // citys: null,
            // areas: null,

            // value: area.getValue(this.props.province, this.props.city, this.props.area),


            provinces: area.getProvinces(),
            citys: area.getCitys(2),
            areas: area.getAreas(2,5),
            value: [1,1,1],
            

            // 选中的省市区名称
            province: '北京市',
            city: '北京市',
            area: '东城区',
            // index1: [],
        }
    }
    // 在组件在装载发生前被立刻调用。
    componentWillMount() {
        this.setState({
            value: area.getValue(this.props.province, this.props.city, this.props.area),
            
        },()=>{
            // console.log('adsasdfasdf ', this.state.value)
            // console.log('11props is ',this.state.provinces)
            // console.log('11props is ',this.state.citys)
            // console.log('11props is ',this.state.areas)

        })
        
    }

    componentDidMount() {
        this.setState({
            // value: area.getValue(this.props.province, this.props.city, this.props.area),

            provinces: area.getProvinces(),
            citys: area.getCitys(this.state.value[0]),
            areas: area.getAreas(this.state.value[0],this.state.value[1]),
            show: this.props.show,
            province: this.props.province,
            city: this.props.city,
            area: this.props.area,
            // index1: this.props.index1
            
        },()=>{
            
            // console.log(this.state.province)
            // console.log(this.state.city)
            // console.log(this.state.area)
            // console.log('value is',this.state.value)
        })
        
        
    }


    handleNYZAreaChange(e) {
        // console.log(e)
        var value = e.detail.value;
        /**
         * 滚动的是省
         * 省改变 市、区都不变
         */
        if(index[0] != value[0]){
          index = [value[0],0,0]
          let selectCitys = area.getCitys(index[0]);
          let selectAreas = area.getAreas(index[0], 0);
          this.setState({
            citys: selectCitys,
            areas: selectAreas,
            value: [index[0],0,0],
            // province: this.state.provinces[index[0]],
            province: this.state.provinces[index[0]],
            city: selectCitys[0],
            area: selectAreas[0]
          })
        } else if (index[1] != value[1]){
          /**
           * 市改变了 省不变 区变
           */
          index = [value[0], value[1], 0]
          let selectCitys = area.getCitys(index[0]);
          let selectAreas = area.getAreas(index[0], value[1]);
          this.setState({
            citys: selectCitys,
            areas: selectAreas,
            value: [index[0], index[1], 0],
            province: this.state.provinces[index[0]],
            city: selectCitys[index[1]],
            area: selectAreas[0]
          })
        } else if (index[2] != value[2]){
          /**
           * 区改变了
           */
          index = [value[0], value[1], value[2]]
          let selectCitys = area.getCitys(index[0]);
          let selectAreas = area.getAreas(index[0], value[1]);
          this.setState({
            citys: selectCitys,
            areas: selectAreas,
            value: [index[0], index[1], index[2]],
            province: this.state.provinces[index[0]],
            city: selectCitys[index[1]],
            area: selectAreas[index[2]]
          })
        }

        


      }
      /**
       * 确定按钮的点击事件
       */
      handleNYZAreaSelect(e) {
          this.props.onChange({
            province1: this.state.province,
            city1: this.state.city,
            area1: this.state.area,
            show: false
          });
      }
      /**
       * 取消按钮的点击事件
       */
      handleNYZAreaCancle(){
        this.props.onCancel({
            show: false
        })
      }



	render () {
        
		return (
            <View>
                {/* 黑色遮罩层 */}
                <View className="mask" style='color:#fff;' ></View>
                {/* 省市区三级联动 */}
                <View className="areaBox">
                    {/* 确认取消按钮 */}
                    <View className='btnsBox'>
                        <Text className='btn_cancel' onClick={this.handleNYZAreaCancle}>取消</Text>
                        <Text className='btn_confirm' onClick={this.handleNYZAreaSelect} data-province="{{province}}" data-city="{{city}}" data-area="{{area}}" >确定</Text>
                    </View>
                    {/* 省市区 */}
                    <PickerView
                        indicatorStyle='height: 50px;'
                        style='width: 100%; height: 180px;'
                        value = {value}
                        onChange = {this.handleNYZAreaChange}
                    >
                        <PickerViewColumn>
                            {this.state.provinces.map(item => {
                                return (
                                    <View className='areaItem' style='line-height:50px;'>{item}</View>
                                )
                            })}

                        </PickerViewColumn>
                        <PickerViewColumn>
                            {this.state.citys.map(item => {
                                return (
                                    <View className='areaItem' style='line-height:50px;'>{item}</View>
                                )
                            })}
                        </PickerViewColumn>
                        <PickerViewColumn>
                            {this.state.areas.map(item => {
                                return (
                                    <View className='areaItem' style='line-height:50px;'>{item}</View>
                                )
                            })}
                        </PickerViewColumn>
                    </PickerView>
                </View>

            </View>
		)
	}
}

